<!--
 * @FilePath: jiangSuMap.vue
 * @Author: 杜芬
 * @Date: 2023-08-02 14:05:31
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2024-09-26 22:32:11
 * Copyright: 2023 xxxTech CO.,LTD. All Rights Reserved.
 * @Descripttion: 页面
-->
<template>
  <div>
    <!-- 江苏地图 -->
    <div>
      <div id="main" ref="jiangxuMap" v-resize="resetDraw" style="width: 500px; height: 500px" />
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import mapJiangSu from '../../../json/geojson-master/echarts/province/jiangsu.json'
export default {
  props: {
    mapName: {
      type: String,
      default: '江苏'
    },
    seriesData: {
      type: Array,
      default: () => {
        return [
          { name: '南京市', value: 4822023 },
          { name: '常州市', value: 731449 },
          { name: '徐州市', value: 6553255 },
          { name: '淮安市', value: 2949131 },
          { name: '南通市', value: 38041430 },
          { name: '宿迁市', value: 5187582 },
          { name: '无锡市', value: 3590347 },
          { name: '扬州市', value: 917092 },
          { name: '盐城市', value: 632323 },
          { name: '苏州市', value: 1931751 },
          { name: '泰州市', value: 9919945 },
          { name: '镇江市', value: 1392313 },
          { name: '连云港市', value: 1595728 }
        ]
      }
    }
  },
  data() {
    return {
      myChart: '',
      myChart1: '',
      // mapPatternImg: '',
      mapNameClone: '江苏',
      mapPatternImg: require('../../../assets/map/wenli0.png') // 江苏地图纹理可以使js文件
    }
  },
  watch: {
    option: {
      handler(newVal, oldVal) {
        if (this.myChart) {
          if (newVal) {
            this.drawLine()
          }
        }
      },
      deep: true
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.mapNameClone = this.mapName
      this.drawLine()
    })
  },
  methods: {
    // 开始画图了
    drawLine() {
      //   const vm = this
      this.myChart = echarts.init(this.$refs.jiangxuMap)
      echarts.registerMap(this.mapNameClone, mapJiangSu)
      this.myChart.setOption(
        {
          geo: {
            map: this.mapNameClone,
            zlevel: 3,
            z: 3,
            zoom: 1.2,
            aspectScale: 1,
            selectedMode: 'single',
            itemStyle: {
              // 纹理
              areaColor: {
                image: this.mapPatternImg, // 纹理
                repeat: 'repeat'
              },
              borderColor: '#1184f6', // 边框颜色
              borderWidth: 1 // 边框宽度
            },
            emphasis: {
              itemStyle: {
                // 鼠标悬浮地图区域的颜色
                areaColor: {
                  type: 'radial',
                  x: 2,
                  y: 3,
                  r: 3,
                  colorStops: [
                    {
                      offset: 0,
                      color: 'rgba(245,242,10,0.4)' // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: 'rgba(245,242,10,0.5)' // 100% 处的颜色
                    }
                  ],
                  global: false
                },
                borderWidth: 3,
                borderColor: '#fff'
              }
            }
          },
          series: [
            {
              type: 'map',
              map: this.mapNameClone,
              zlevel: 4,
              id: 4,
              zoom: 1.2,
              aspectScale: 1,
              selectedMode: 'single',
              label: {
                show: true,
                formatter: (params) => {
                  if (params.data) {
                    return `{d|${params.data.value}}\n{a|${params.name}}`
                  } else {
                    return `{a|${params.name}`
                  }
                },
                rich: {
                  a: {
                    color: '#fff',
                    fontSize: 12,
                    padding: [0, 0, 30, 20]
                  },
                  d: {
                    color: '#fff',
                    width: 40,
                    height: 20,
                    lineHeight: 20,
                    padding: [0, 0, 10, 0],
                    backgroundColor: {
                      image: require('../../../assets/img/01 (31).png')
                    }
                  }
                }
              },
              itemStyle: {
                // 第一层颜色
                areaColor: {
                  type: 'radial',
                  r: 300,
                  // 中间的颜色
                  colorStops: [
                    {
                      offset: 0,
                      color: 'transparent' // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: 'transparent' // 100% 处的颜色
                    }
                  ],
                  global: false
                },
                borderWidth: 4,
                borderColor: '#15c977',
                shadowColor: 'transparent'
              },
              data: this.seriesData
            }
          ]
        },
        true
      )
    },
    resetDraw() {
      this.myChart.resize()
    }
  }
}
</script>
<style scoped></style>
